<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../../bower_components/vaadin-icons/vaadin-icons.html">
<link rel="import" href="../../../bower_components/vaadin-text-field/src/vaadin-text-field.html">
<link rel="import" href="../../../bower_components/vaadin-button/src/vaadin-button.html">
<link rel="import" href="../../../bower_components/vaadin-form-layout/src/vaadin-form-layout.html">
<link rel="import" href="../../../bower_components/vaadin-form-layout/src/vaadin-form-item.html">
<link rel="import" href="../../../bower_components/vaadin-combo-box/src/vaadin-combo-box.html">
<link rel="import" href="../../../bower_components/vaadin-date-picker/src/vaadin-date-picker.html">
<link rel="import" href="../../../bower_components/vaadin-icons/vaadin-icons.html">

<link rel="import" href="../../components/buttons-bar.html">
<link rel="import" href="../../components/utils-mixin.html">
<link rel="import" href="order-item-editor.html">

<link rel="import" href="../../../styles/shared-styles.html">

<dom-module id="order-editor">
  <template>
    <style include="shared-styles">
      :host {
        display: flex;
        flex-direction: column;
        flex: auto;
      }

      .meta-row {
        display: flex;
        justify-content: space-between;
        padding-bottom: var(--lumo-space-s);
      }

      .dim {
        color: var(--lumo-secondary-text-color);
        text-align: right;
        white-space: nowrap;
        line-height: 2.5em;
      }

      .status {
        width: 10em;
      }
    </style>

    <div class="scrollable flex1" id="main">
      <h2 id="title">New order</h2>

      <div class="meta-row" id="metaContainer">
        <vaadin-combo-box class="status" id="status"></vaadin-combo-box>
        <span class="dim">Order #<span id="orderNumber"></span></span>
      </div>

      <vaadin-form-layout id="form1">

        <vaadin-form-layout id="form2">
          <vaadin-date-picker label="Due"  id="dueDate">
          </vaadin-date-picker>
          <vaadin-combo-box id="dueTime">
            <iron-icon slot="prefix" icon="vaadin:clock"></iron-icon>
          </vaadin-combo-box>
          <vaadin-combo-box id="pickupLocation" colspan="2">
            <iron-icon slot="prefix" icon="vaadin:at"></iron-icon>
          </vaadin-combo-box>
        </vaadin-form-layout>

        <vaadin-form-layout id="form3" colspan="3">
          <vaadin-text-field id="customerName" label="Customer" colspan="2">
            <iron-icon slot="prefix" icon="vaadin:user"></iron-icon>
          </vaadin-text-field>

          <vaadin-text-field id="customerNumber" label="Phone number">
            <iron-icon slot="prefix" icon="vaadin:phone"></iron-icon>
          </vaadin-text-field>

          <vaadin-text-field  id="customerDetails" label="Additional Details" colspan="2"></vaadin-text-field>

          <vaadin-form-item colspan="3">
            <label slot="label">Products</label>
          </vaadin-form-item>
          <div id="itemsContainer" colspan="3"></div>
        </vaadin-form-layout>

      </vaadin-form-layout>
    </div>

    <buttons-bar id="footer" no-scroll$="[[noScroll]]">
      <vaadin-button slot="left" id="cancel">Cancel</vaadin-button>
      <div slot="info" class="total">Total [[totalPrice]]</div>
      <vaadin-button slot="right" id="review" theme="primary">
        Review order
        <iron-icon icon="vaadin:arrow-right" slot="suffix"></iron-icon>
      </vaadin-button>
    </buttons-bar>
  </template>

  <script>
    class OrderEditor extends window.ScrollShadowMixin(Polymer.Element) {

      static get is() {
        return 'order-editor';
      }

      static get properties() {
        return {
          status: {
            type: String,
            observer: '_onStatusChange'
          }
        };
      }

      ready() {
        super.ready();

        // Not using attributes since Designer does not suppor single-quote attributes
        this.$.form1.responsiveSteps = [
          {columns: 1, labelsPosition: 'top'},
          {minWidth: '600px', columns: 4, labelsPosition: 'top'}
        ];
        this.$.form2.responsiveSteps = [
          {columns: 1, labelsPosition: 'top'},
          {minWidth: '360px', columns: 2, labelsPosition: 'top'}
        ];
        this.$.form3.responsiveSteps = [
          {columns: 1, labelsPosition: 'top'},
          {minWidth: '500px', columns: 3, labelsPosition: 'top'}
        ];
      }

      _onStatusChange() {
        const status = this.status ? this.status.toLowerCase() : this.status;
        this.$.status.$.input.setAttribute('status', status);
      }
    }

    window.customElements.define(OrderEditor.is, OrderEditor);
  </script>
</dom-module>
